<template>
<div>
  <NavBar>
    购物车
  </NavBar>
  <div class="goodsList">
    <van-checkbox-group  ref="checkboxGroup" v-model="result">
    <van-swipe-cell  :right-width="50" v-for="item in cartList.list" :key="item.id">
      <div style="float:left" class="checkbox">
      <van-checkbox  :name="item.id" @click.prevent="changeCheck"/></div>
      <div style="float:left">
      <van-card
          :num="item.goods.stock"
          :price="item.goods.price"
          :title="item.goods.title"
          class="goods-card"
          :thumb="item.goods.cover_url" style="float: left"/>
      </div>
        <van-stepper :min="1" :max="10" integer step="1" style="float: left;line-height: 103px"
         :model-value="item.num" :name="item.id" async-change @change="onChange"/>
      <template #right>
        <van-button square type="danger" text="删除" class="btn" @click="deleteCartItem(item.id)"/>
      </template>
    </van-swipe-cell>
      <div class="end-cart">
        <div style="float:left;" class="checkbox2">
        <van-checkbox v-model:checked="all" @click="allCheck"/>
        </div>
        <div style="float: left">
          <span style="float:left;line-height: 44px;margin-left:15px">全选</span>
          <div style="float: right;width: 280px;display: inline-block;text-align: right;line-height: 44px">
            <span>合计</span>
            <span style="color: red">￥{{getPrice}}.00</span>
            <van-button round type="danger" @click.stop="onsubmit" style="margin-left: 10px;position:relative;bottom:6px;padding:0 30px">结算</van-button>
          </div>
        </div>
      </div>
    </van-checkbox-group>
  </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar";
import {Toast} from 'vant'
import {getCart} from '@/api/cart/index'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import {onMounted, reactive, toRefs, getCurrentInstance, computed, ref} from 'vue'
export default {
  name: "shopCart",
  components: {NavBar},
  setup(){
   let cartList=reactive({
     list:[]
   })
    const store=useStore()
    const router=useRouter()
    let all=ref(true)
    const {proxy}=getCurrentInstance()
   const goods=reactive({
        value:0,
         num:0,
        result:[]
    })
    const onsubmit=()=>{
     if(goods.result.length==0){
       Toast.fail('请选择你的商品进行结算')
     }else{
       router.push('/createOrder')
     }
    }
    const changeCheck=async ()=>{
    await proxy.$API.cart.checkedCart({cart_ids:goods.result}).then(res=>{
       console.log(res)
     })
      await init()
    }
    const onChange=(value,detail)=>{
     console.log(value,detail)
      proxy.$API.cart.modifyCart(detail.name,{num:value}).then(res=>{
        console.log(res)
        cartList.list.forEach(item=>{//更新list里面的值
          if(item.id==detail.name){
            item.num=value
          }
        })
        console.log(cartList.list[0])
      })
    }
   const getPrice=computed(()=>{
      return cartList.list.reduce((pre,current)=>{
        if(current.is_checked===1) {
          return pre + current.goods.price * current.num
        }else{
          return pre
        }
     },0)
    })
    const deleteCartItem=async id=>{
     console.log(id)
      await proxy.$API.cart.deleteCartItem(id).then(res=>{
        console.log(res)
      })
      await init()
      await store.dispatch('updateCart')
    }
    const allCheck=()=>{
     if(!all.value) {
       goods.result=cartList.list.map(item=>item.id)
     }else{
       goods.result=[]
     }
      changeCheck()
      console.log(cartList.list)
      all.value=!all.value
    }
    const init=async ()=>{
      await getCart('include=goods').then(res=>{
        console.log('res2',res)
        cartList.list=res.data
        goods.result=res.data.filter(item=>item.is_checked===1).map(item2=>item2.id)
      })
      all.value=(cartList.list.length==goods.result.length)&&(cartList.list.length!=0)?true:false
    }
    onMounted( ()=>{
     init()
      console.log(all.value)
    })
    return{
     cartList,
     ...toRefs(goods),
     changeCheck,
      onChange,
      getPrice,
      all,
      allCheck,
      deleteCartItem,
      onsubmit
    }
  }
}
</script>

<style scoped>
.goodsList{
  margin-top:45px;
}
.btn{
padding: 25px 15px;
}
::v-deep .van-swipe-cell{
  line-height: 103px;
}
::v-deep .van-card{
   width: 230px;
  text-align: center;
  background-color: white;
}
::v-deep .van-card__num{
  position: relative;
  left:90px;
  top:-65px
}
.end-cart{
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  border-top: 1px solid red;
  height: 46px;
}
.checkbox{
  height: 30px;
  width: 30px;
  position: relative;
  top:40px;
  left: 10px;
}
.checkbox2{
  position: relative;
  top:10px;
  left: 10px;
}
</style>
